<template>
  <el-menu collapse class="org-more-menu">
    <el-submenu index="1" :show-timeout="0" :hide-timeout="100">
      <template slot="title">
        <i class="el-icon-more org-more-menu-icon"></i>
      </template>
      <el-menu-item index="1-1" class="org-more-menu-item" @click="addDept(node, data)">
        添加子部门
      </el-menu-item>
      <el-menu-item
        v-if="!isRoot"
        index="1-2"
        class="org-more-menu-item"
        @click="renameDept(node, data)"
      >
        部门重命名
      </el-menu-item>
      <el-submenu
        v-if="!isRoot"
        index="1-3"
        class="org-more-submenu"
        :show-timeout="0"
        :hide-timeout="50"
        :popper-append-to-body="true"
      >
        <span slot="title">调整排序</span>
        <el-menu-item index="1-3-1" class="org-more-menu-item" @click="goTop(node, data)">
          置顶
        </el-menu-item>
        <el-menu-item index="1-3-2" class="org-more-menu-item" @click="goUp(node, data)">
          上移
        </el-menu-item>
        <el-menu-item index="1-3-3" class="org-more-menu-item" @click="goDown(node, data)">
          下移
        </el-menu-item>
        <el-menu-item index="1-3-4" class="org-more-menu-item" @click="goBottom(node, data)">
          置底
        </el-menu-item>
      </el-submenu>
      <el-menu-item
        v-if="!isRoot"
        index="1-4"
        class="org-more-menu-item"
        @click="moveDept(node, data)"
      >
        部门迁移
      </el-menu-item>
      <el-menu-item
        v-if="!isRoot"
        index="1-5"
        class="org-more-menu-item"
        @click="deleteDept(node, data)"
      >
        删除部门
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  export default {
    props: {
      node: {
        type: Object,
        required: true,
      },
      data: {
        type: Object,
        required: true,
      },
    },
    computed: {
      isRoot() {
        return this.data.parentId === 0;
      },
    },
    methods: {
      addDept(node, data) {
        const { id, parentId, deptName } = data;
        this.$emit('open-modal', 'addDept', { id, parentId, deptName });
      },
      renameDept(node, data) {
        const { id, parentId, deptName } = data;
        this.$emit('open-modal', 'renameDept', { id, parentId, deptName });
      },
      moveDept(node, data) {
        const { id, parentId, deptName } = data;
        this.$emit('open-modal', 'moveDept', { id, parentId, deptName });
      },
      deleteDept(node, data) {
        const { id, parentId, deptName } = data;
        this.$emit('open-modal', 'deleteDept', { id, parentId, deptName });
      },
      goTop(node, data) {
        if (node.previousSibling) {
          const { id, parentId } = data;
          this.$store.dispatch('organization/goTopTreeNode', {
            id,
            parentId,
          });
        }
      },
      goUp(node, data) {
        if (node.previousSibling) {
          const prev = node.previousSibling.data;
          const { id, parentId, departmentSort } = data;
          this.$store.dispatch('organization/goUpTreeNode', {
            id,
            parentId,
            departmentSort,
            prev_id: prev.id,
            prev_departmentSort: prev.departmentSort,
          });
        }
      },
      goDown(node, data) {
        if (node.nextSibling) {
          const next = node.nextSibling.data;
          const { id, parentId, departmentSort } = data;
          this.$store.dispatch('organization/goDownTreeNode', {
            id,
            parentId,
            departmentSort,
            next_id: next.id,
            next_departmentSort: next.departmentSort,
          });
        }
      },
      goBottom(node, data) {
        if (node.nextSibling) {
          const { id, parentId } = data;
          this.$store.dispatch('organization/goBottomTreeNode', {
            id,
            parentId,
          });
        }
      },
    },
  };
</script>

<style lang="scss">
  $moreItemHeight: 34px;
  .org-tree {
    .el-tree-node__content {
      height: $moreItemHeight;
    }
    .el-menu {
      width: 52px;
      background-color: transparent;
    }
    .el-submenu__title {
      height: $moreItemHeight;
      line-height: $moreItemHeight;
      padding: 0;
    }
    .org-more-menu-icon {
      margin-left: -20px !important;
      color: #606266 !important;
      font-size: 14px !important;
      font-weight: normal !important;
      height: 14px !important;
      width: 14px !important;
      margin-top: -3px !important;
      margin-right: 1px !important;
    }
  }
  .org-more-menu-item {
    height: $moreItemHeight !important;
    line-height: $moreItemHeight !important;
  }
  .org-more-submenu {
    .el-submenu__title {
      height: $moreItemHeight;
      line-height: $moreItemHeight;
    }
  }
  .org-more-menu-item.el-menu-item.is-active {
    color: #303133;
  }
</style>
